<template>
  <div class="car">
    <van-checkbox-group v-model="result">
      <van-checkbox :name="item"  v-for="item in cartList" :key="item.id" @click="singleCheckFn" >
        <van-card :num="item.number" :price="item.retail_price" desc="描述信息" :title="item.goods_name" :thumb="item.list_pic_url"/>
        <template #del>
            <van-button size="mini" @click="delFn(item)">删除</van-button>
          </template>
      </van-checkbox>
    </van-checkbox-group>
    <!-- 提交订单栏 -->
    <van-submit-bar :price="totalPrice" button-text="提交订单" @submit="onSubmit">
      <van-checkbox v-model="checked" @click="checkAllFn">全选</van-checkbox>
      <template #tip>
        你的收货地址不支持同城送,
        <span @click="onClickEditAddress">修改地址</span>
      </template>
    </van-submit-bar>
  </div>
</template>

<script>
// 引入 购物车数据
import { getCarData } from "@/utils/http";
import { Toast } from "vant";
export default {
  name: "Car",
  props: [""],
  data() {
    return {
      result: [], // 选中的商品的集合
      cartList: [], // 购物车数组
      checked: false, // 全选状态
    };
  },
  computed: {
    // 依赖的数据发生变化,计算属性会重新计算,
    totalPrice() {
      // 根据选中项的单价*数量 累加就是总价
      let sum = 0;
      this.result.forEach((item) => {
        sum += item.retail_price * item.number * 100;
      });

      return sum;
    },
  },
  created() {
    getCarData().then((res) => {
      console.log(res);
      this.cartList = res.data.data.cartList;
    });
  },
  methods: {
    onSubmit() {
      // 提交订单
     this.$toast({
  message: '请使用微信支付',
  icon: 'https://i.postimg.cc/cCMR6ZP6/20220625123820.jpg',
  //是否显示背景遮罩层
  overlay:true,
  //展示时间
  duration:0,
  //点击图片关闭
  closeOnClick:true,
  //点击遮罩层关闭
  closeOnClickOverlay:true,
  className:Toast
});

    },
     onClickEditAddress() {
      // 修改地址
    },
    checkAllFn() {
      // 全选事件
      // console.log(this.checked);
      if (this.checked) {
        this.result = this.cartList;
      } else {
        this.result = [];
      }
    },
    singleCheckFn() {
      // 单选事件
      // console.log(this.result);
      if (
        this.result.length == this.cartList.length &&
        this.cartList.length != 0
      ) {
        this.checked = true;
      } else {
        this.checked = false;
      }
    },
    delFn(item) {
      DelGoods({ productIds: String(item.product_id) }).then((res) => {
        console.log(res);
        // 重新渲染购物车数据
        this.cartList = res.data.data.cartList;
        // 初始化单选状态
        this.result = []; // 清空
        this.cartList.forEach((item) => {
          if (item.checked == 1) {
            this.result.push(item);
          }
        });
        // 判断全选状态
        if (
          this.result.length == this.cartList.length &&
          this.cartList.length != 0
        ) {
          this.checked = true;
        } else {
          this.checked = false;
        }
      });
    },
  },
};
</script>
<style lang='less' scoped  >

/deep/.van-toast__icon {
    font-size: 148px;
}
/deep/ .van-toast {
    font-size: 296px;
}
.van-toast {
  width: 300px;
}

/deep/.van-checkbox__label {
  flex: 1;
}
/deep/.van-submit-bar {
  bottom: 50px;
}
</style>